<template>
	<view @touchmove.stop.prevent="()=>{}">

		<!-- 首页 -->
		<view class="skeletonContent" v-if="type == 'index'">
			<view class="flex menu">
				<view class="skeletonBackground flex-1 item borderRadius"></view>
				<view class="skeletonBackground flex-1 item borderRadius"></view>
				<view class="skeletonBackground flex-1 item borderRadius"></view>
				<view class="skeletonBackground flex-1 item borderRadius"></view>
				<view class="skeletonBackground flex-1 item borderRadius"></view>
			</view>
			<view class="skeletonBackground notice borderRadius"></view>
			<view class="skeletonBackground ad borderRadius"></view>
			<view class="more flex">
				<view class="skeletonBackground leftText borderRadius"></view>
				<view class="skeletonBackground rightText borderRadius"></view>
			</view>
			<view class="skeletonBackground line borderRadius"></view>
			<view class="skeletonBackground line borderRadius"></view>
		</view>
		<!-- 首页 -->

		<!-- 列表 -->
		<view class="skeletonContent" v-if="type == 'list'">
			<view class="more skeletonListMoreMg flex">
				<view class="skeletonBackground leftText borderRadius"></view>
				<view class="skeletonBackground rightText borderRadius"></view>
			</view>
			<view class="skeletonListItem" v-for="(item,index) in 5" :key="index">
				<view class="flex top">
					<view class="skeletonBackground img borderRadius"></view>
					<view class="info flex">
						<view class="skeletonBackground infoLine1 borderRadius"></view>
						<view class="skeletonBackground infoLine2 borderRadius"></view>
					</view>
				</view>
				<view class="skeletonBackground bottom borderRadius"></view>
			</view>
		</view>
		<!-- 列表 -->

		<!-- 详情 -->
		<view class="skeletonContent detailContent" v-if="type == 'detail'">
			<view class="more flex">
				<view class="skeletonBackground leftText borderRadius"></view>
				<view class="skeletonBackground rightText borderRadius"></view>
			</view>
			<view class="skeletonBackground line433 height30 marginBtm37 borderRadius"></view>
			<view class="skeletonBackground height134 marginBtm40 borderRadius"></view>
			<view class="skeletonBackground line168 height30 marginBtm29 borderRadius"></view>
			<view class="skeletonBackground height30 marginBtm30 borderRadius"></view>
			<view class="skeletonBackground height30 line378 marginBtm61 borderRadius"></view>
			<view class="skeletonBackground height34 line168 marginBtm29 borderRadius"></view>
			<view class="skeletonBackground height30 marginBtm27 borderRadius"></view>
			<view class="skeletonBackground height30 marginBtm30 borderRadius"></view>
			<view class="skeletonBackground height30 marginBtm61 borderRadius"></view>
			<view class="skeletonBackground height34 line168 marginBtm29 borderRadius"></view>
			<view class="skeletonBackground height30 line467 marginBtm37 borderRadius"></view>
			<view class="skeletonBackground marginBtm33 borderRadius"></view>
			<view class="skeletonBackground marginBtm61 borderRadius"></view>
			<view class="skeletonBackground line168 height34 marginBtm29 borderRadius"></view>
			<view class="skeletonBackground height34 marginBtm27 borderRadius"></view>
			<view class="skeletonBackground height34 marginBtm30 borderRadius"></view>
			<view class="skeletonBackground height34 line398 marginBtm66 borderRadius"></view>
			<view class="companyInfo marginBtm66 flex">
				<view class="img borderRadius skeletonBackground"></view>
				<view class="info flex">
					<view class="skeletonBackground height34 borderRadius"></view>
					<view class="skeletonBackground height30 borderRadius"></view>
				</view>
			</view>

			<view class="skeletonBackground line168 height34 marginBtm29 borderRadius"></view>
			<view class="skeletonBackground height30 marginBtm27 borderRadius"></view>
			<view class="skeletonBackground line405 height30 marginBtm37 borderRadius"></view>
			<view class="skeletonBackground height134 borderRadius"></view>
		</view>
		<!-- 详情 -->

		<!-- 招聘会 -->
		<view class="skeletonContent jobfairContent" v-if="type == 'jobfair'">
			<view class="skeletonBackground banner"></view>
			<view class="skeletonBackground search borderRadius"></view>
			<view class="jobfairItem flex" v-for="(item,index) in 5" :key="index">
				<view class="img skeletonBackground borderRadius"></view>
				<view class="info flex">
					<view class="skeletonBackground infoLine1 borderRadius"></view>
					<view class="skeletonBackground infoLine2 borderRadius"></view>
				</view>
			</view>
		</view>
		<!-- 招聘会 -->

		<!-- 招聘会详情 -->
		<view class="skeletonContent jobfairDetailContent" v-if="type == 'jobfairDetail'">
			<view class="skeletonBackground banner"></view>
			<view class="skeletonBackground search"></view>
			<view class="jobfairDetailItem" v-for="(item,index) in 2" :key="index">
				<view class="skeletonBackground content borderRadius"></view>
				<view class="btns flex">
					<view class="skeletonBackground btn borderRadius"></view>
					<view class="skeletonBackground btn borderRadius"></view>
				</view>
			</view>
		</view>
		<!-- 招聘会详情 -->

		<!-- 咨询公告列表 -->
		<view class="skeletonContent" v-if="type == 'newsList'">
			<view class="newsMore skeletonBackground borderRadius"></view>
			<view class="newsListItem flex" v-for="(item,index) in 6" :key="index">
				<view class="img skeletonBackground borderRadius"></view>
				<view class="info flex">
					<view class="skeletonBackground infoLine1 borderRadius"></view>
					<view class="skeletonBackground infoLine2 borderRadius"></view>
				</view>
			</view>
		</view>
		<!-- 咨询公告列表 -->

		<!-- 咨询公告详情 -->
		<view class="skeletonContent newsDetailContent" v-if="type == 'newsListDetail'">
			<view class="skeletonBackground borderRadius line1"></view>
			<view class="skeletonBackground borderRadius line2"></view>
			<view class="skeletonBackground borderRadius line3"></view>
			<view class="skeletonBackground borderRadius line4"></view>
			<view class="skeletonBackground borderRadius line5"></view>
			<view class="skeletonBackground borderRadius line6"></view>
			<view class="skeletonBackground borderRadius line7"></view>
		</view>
		<!-- 咨询公告详情 -->
	</view>
</template>

<script>
	export default {
		name: "Skeleton",
		props: {
			type: {
				type: String,
				default: 'index'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.skeletonContent {
		padding: 0 30rpx;
		/* #ifdef MP-WEIXIN */
		padding: 150rpx 30rpx 0;
		/* #endif */
		background: #FFFFFF;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
	}

	.skeletonBackground {
		background: #F7F9FF;
	}

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.borderRadius {
		border-radius: 10rpx;
	}


	.menu {
		padding: 49rpx 0 37rpx;

		.item {
			height: 110rpx;
			margin-right: 33rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.notice {
		height: 82rpx;
		margin-bottom: 25rpx;
	}

	.ad {
		height: 170rpx;
		margin-bottom: 37rpx;
	}

	.more {
		margin: 37rpx 0 32rpx;
		justify-content: space-between;

		.leftText {
			width: 274rpx;
			height: 34rpx;
		}

		.rightText {
			width: 100rpx;
			height: 34rpx;
		}
	}

	.line {
		height: 280rpx;
		margin-bottom: 27rpx;
	}

	// 列表
	.skeletonListMoreMg {
		margin: 50rpx 0 70rpx;
	}

	.skeletonListItem {
		margin-bottom: 70rpx;

		.top {
			margin-bottom: 39rpx;

			.img {
				width: 100rpx;
				height: 100rpx;
				flex-shrink: 0;
				margin-right: 32rpx;
			}

			.info {
				flex-shrink: 0;
				width: calc(100% - 132rpx);
				flex-direction: column;
				justify-content: space-between;

				.infoLine1,
				.infoLine2 {
					height: 30rpx;
				}

				.infoLine1 {
					width: 274rpx;
				}

				.infoLine2 {
					width: 433rpx;
				}
			}
		}

		.bottom {
			height: 30rpx;
		}
	}

	// 列表


	// 详情
	.detailContent {
		.height30 {
			height: 30rpx;
		}

		.height34 {
			height: 34rpx;
		}

		.height134 {
			height: 134rpx;
		}

		.height212 {
			height: 212rpx;
		}

		.marginBtm29 {
			margin-bottom: 29rpx;
		}

		.marginBtm30 {
			margin-bottom: 30rpx;
		}

		.marginBtm33 {
			margin-bottom: 33rpx;
		}

		.marginBtm40 {
			margin-bottom: 40rpx;
		}

		.marginBtm27 {
			margin-bottom: 27rpx;
		}

		.marginBtm37 {
			margin-bottom: 37rpx;
		}

		.marginBtm61 {
			margin-bottom: 61rpx;
		}

		.marginBtm66 {
			margin-bottom: 66rpx;
		}

		.line433 {
			width: 433rpx;
		}

		.line168 {
			width: 168rpx;
		}

		.line378 {
			width: 378rpx;
		}

		.line467 {
			width: 467rpx;
		}

		.line398 {
			width: 398rpx;
		}

		.line405 {
			width: 405rpx;
		}

		.line274 {
			width: 274rpx;
		}

		.companyInfo {
			.img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 32rpx;
				flex-shrink: 0;
			}

			.info {
				width: calc(100% - 132rpx);
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}

	// 详情



	// 招聘会
	.jobfairContent {
		padding: 0;

		.banner {
			height: 240rpx;
			margin-bottom: 23rpx;
		}

		.search {
			height: 85rpx;
			margin: 0 30rpx 62rpx;
		}

		.jobfairItem {
			margin: 0 30rpx 94rpx;

			.img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 32rpx;
				flex-shrink: 0;
			}

			.info {
				width: calc(100% - 132rpx);
				flex-direction: column;
				justify-content: space-between;

				.infoLine1 {
					width: 274rpx;
					height: 34rpx;
				}

				.infoLine2 {
					width: 433rpx;
					height: 30rpx;
				}
			}
		}
	}

	// 招聘会

	// 招聘会详情
	.jobfairDetailContent {
		padding: 0;

		.banner {
			height: 240rpx;
			margin-bottom: 40rpx;
		}

		.search {
			height: 70rpx;
			border-radius: 35rpx;
			margin-bottom: 40rpx;
			margin: 0 30rpx 40rpx;
		}

		.jobfairDetailItem {
			margin: 0 30rpx 98rpx;

			.content {
				height: 230rpx;
				margin-bottom: 25rpx;
			}

			.btns {
				margin: 25rpx 28rpx 0;

				.btn {
					flex: 1;
					height: 76rpx;
					margin-right: 30rpx;

					&+.btn {
						margin-right: 0;
					}
				}
			}
		}
	}

	// 招聘会详情

	// 咨询公告列表
	.newsMore {
		width: 274rpx;
		height: 34rpx;
		margin: 51rpx 0 74rpx;
	}

	.newsListItem {
		margin: 0 0 94rpx;

		.img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 32rpx;
			flex-shrink: 0;
		}

		.info {
			flex-direction: column;
			justify-content: space-between;

			.infoLine1 {
				width: 274rpx;
				height: 34rpx;
			}

			.infoLine2 {
				width: 433rpx;
				height: 30rpx;
			}
		}
	}

	// 咨询公告列表

	// 咨询公告详情
	.newsDetailContent {
		.line1 {
			width: 426rpx;
			height: 34rpx;
			margin: 66rpx 0 28rpx;
		}

		.line2 {
			height: 30rpx;
			margin: 0 0 54rpx;
		}

		.line3 {
			height: 360rpx;
			margin: 0 0 40rpx;
		}

		.line4 {
			height: 297rpx;
			margin: 0 0 40rpx;
		}

		.line5 {
			height: 30rpx;
			margin: 0rpx 0 40rpx;
		}

		.line6 {
			height: 30rpx;
			margin: 0rpx 0 60rpx;
		}

		.line7 {
			height: 148rpx;
		}
	}

	// 咨询公告详情
</style>